<template>
  <div class="container">
    <div class="search-box">
      <el-row :gutter="10">
        <div class="acatar">
          <UserAcatar @transfer="change" />
        </div>
      </el-row>
    </div>

    <div class="eval-system">
      <div class="teacher-list">
        <div class="course-list">
          <el-table :data="list" border>
            <el-table-column
              label="教师姓名"
              prop="teacher"
              width="350"
            ></el-table-column>
            <el-table-column
              label="课程名称"
              prop="course"
              width="400"
            ></el-table-column>
            <el-table-column label="操作" width="350">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="small"
                  @click="showEvalForm(scope.row.courseId)"
                  >评估</el-button
                >
              </template>
            </el-table-column>
            <el-table-column label="进度" width="407">
              <template slot-scope="scope">
                <div class="progress-bar">
                  <el-progress
                    :percentage="(scope.$index / list.length) * 100"
                  />
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      title="教师评价"
      :close-on-click-modal="false"
    >
      <el-form label-width="150px">
        <el-form-item label="教师姓名">
          <el-input v-model="currentDetail.teacher" disabled></el-input>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-input v-model="currentDetail.course" disabled></el-input>
        </el-form-item>
        <div class="npc">
          <h4>课堂表现</h4>
          <el-radio-group v-model="question1">
            <el-radio label="1">差</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">良好</el-radio>
            <el-radio label="4">优秀</el-radio>
          </el-radio-group>

          <h4>工作作风</h4>
          <el-radio-group v-model="question2">
            <el-radio label="1">差</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">良好</el-radio>
            <el-radio label="4">优秀</el-radio>
          </el-radio-group>

          <h4>课堂fuck</h4>
          <el-radio-group v-model="question3">
            <el-radio label="1">差</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">良好</el-radio>
            <el-radio label="4">优秀</el-radio>
          </el-radio-group>
        </div>
        <el-form-item label="评价内容" style="margin-top: 10px">
          <el-input type="textarea" v-model="currentDetail.comment"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import UserAcatar from "@/components/UserAcatar.vue";
export default {
  name: "corrent",
  components: {
    UserAcatar,
  },
  data() {
    return {
      list: [
        {
          teacher: "张三",
          course: "Vue实战",
          courseId: 1,
        },
        {
          teacher: "李四",
          course: "React实战",
          courseId: 2,
        },
      ],
      dialogVisible: false, // 定义一个用于控制对话框显示的属性
      currentDetail: {
        teacher: "",
        course: "",
        score: 0,
        comment: "",
      }, // 定义当前评估的教师和课程的详细信息
      question1: "课堂表现",
      question2: "fuck you",
      question3: "迪克",
    };
  },
  mounted() {},

  methods: {
    change(msg) {
      this.$emit("transfer", msg);
    },
    showEvalForm(courseId) {
      // 显示对话框
      this.currentDetail = this.list.find((item) => item.courseId === courseId);
      this.dialogVisible = true;
    },
    submitEvaluation() {
      this.dialogVisible = false;
    },
    change(avatar) {
      console.log(avatar);
    },
  },
};
</script>

<style scoped>
.acatar {
  float: right;
  margin-right: 10px;
  margin-top: 10px;
}

</style>